// 模拟远程处理URL资源
function handleURL(url, callback) {
    setTimeout(() => {
        callback(url)
    }, 2000)
}

// 基础展示图片组件--->不可修改
const dynamicImg = {
    props: {
        source: {
            type: String,
            default: ""
        }
    },
    functional: true,
    render(h, ctx) {
        return h('img', {
            attrs: {
                src: ctx.props.source
            }
        })
    },
}

// 组件装饰器--->把无用逻辑放到高阶组件中去做，保证了对象的单纯性
function strengthenDynamicImg(ImgComponent) {
    return {
        props: {
            type: String,
            default: ""
        },
        data() {
            return {
                src: "./assets/loading.gif"
            }
        },
        // 在高阶组件的增强器中的生命周期做无关零散的逻辑
        created() {
            handleURL('./assets/react.png', url => {
                this.src = url;
            });
        },
        render(h) {
            return h(ImgComponent, {
                props: {
                    source: this.src
                }
            });
        },
    };
}

new Vue({
    el: "#app",
    components: {
        'dynamic-img': strengthenDynamicImg(dynamicImg)// 使用高阶组件完成
    }
});